<!--复选框-->
<template>
  <div class="branch-tree">
    <van-checkbox-group v-model="result">
      <van-cell-group>
        <van-cell v-for="(item, index) in list" clickable :key="index" :title="item.name">
          <!-- <span class="custom-title">单元格</span> -->
          <van-checkbox
            :name="item.id"
            @click="branchCheckClick"
            ref="checkboxes"
            slot="title"
          >{{ item.name }}</van-checkbox>
          <span slot="right-icon" @click.stop="branchClick(item.id)">
            <van-icon name="bars" />
          </span>
          <!-- <van-checkbox
            :name="item.id"
            @click="branchCheckClick"
            ref="checkboxes"
            slot="right-icon"
          />-->
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
    <van-checkbox-group v-if="userList.length > 0" v-model="userResult">
      <van-cell-group class="user-list-group">
        <van-checkbox v-for="(item, index) in userList" :key="index" :name="item.id">
          {{ item.name }}
          <img
            slot="icon"
            slot-scope="props"
            :src="props.checked ? icon.active : icon.inactive"
          />
        </van-checkbox>
      </van-cell-group>
    </van-checkbox-group>
    <van-row class="button-group">
      <van-button color="#6A4781" @click="sure">确认</van-button>
      <van-button color="#D9D9D9" @click="back">取消</van-button>
    </van-row>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      list: [
        {
          id: "2222",
          name: "党委办公室/校领导办公室"
        },
        {
          id: "2223",
          name: "学生处"
        },
        {
          id: "2224",
          name: "教务处"
        },
        {
          id: "2225",
          name: "离退休办公室"
        },
        {
          id: "2226",
          name: "党委学生工作部（学生工作办公室、武装部）"
        },
        {
          id: "2227",
          name: "党委研究生工作部"
        }
      ],
      result: [],
      icon: {
        active: "https://img.yzcdn.cn/vant/user-active.png",
        inactive: "https://img.yzcdn.cn/vant/user-inactive.png"
      },
      userList: [],
      userResult: []
    };
  },
  props: {},
  methods: {
    //模拟
    branchClick(bmid) {
      this.list = [
        {
          id: "232",
          name: "子级目录1"
        },
        {
          id: "1237",
          name: "子级目录2"
        }
      ];

      if (bmid == "2223") {
        this.userList = [
          {
            id: "011",
            name: "东风不败"
          },
          {
            id: "022",
            name: "任我行"
          }
        ];
      } else if (bmid == "2226") {
        this.userList = [
          {
            id: "051",
            name: "盈盈"
          },
          {
            id: "042",
            name: "小师妹"
          },
          {
            id: "001",
            name: "楚留香"
          },
          {
            id: "002",
            name: "李寻欢"
          },
          {
            id: "003",
            name: "花满楼"
          }
        ];
      } else {
        this.userList = [
          {
            id: "111",
            name: "林平之"
          },
          {
            id: "122",
            name: "余沧海"
          },
          {
            id: "125",
            name: "风清扬"
          },
          {
            id: "1222",
            name: "左冷禅"
          },
          {
            id: "1252",
            name: "田伯光"
          },
          {
            id: "16522",
            name: "老尼姑"
          }
        ];
      }
    },
    // 选择
    sure() {
      console.log(this.result);
      // console.log(this.userResult);
      let _this = this;
      let msg = "";
      if (_this.result.length > 0) {
        _this.list.forEach(function(item, index) {
          _this.result.forEach(function(obj, i) {
            if (item.id == obj) {
              msg += item.name + ",";
            }
          });
        });
      } else {
        _this.userList.forEach(function(item, index) {
          _this.userResult.forEach(function(obj, i) {
            if (item.id == obj) {
              msg += item.name + ",";
            }
          });
        });
      }
      let emitData = {
        msg: msg,
        result: _this.result,
        userResult: _this.userResult
      };
      console.log(msg);
      _this.$emit("check", emitData);
    },
    // 取消 回到父级页面
    back() {
      this.$emit("back", false);
    },
    // 复选框点击阻止冒泡
    branchCheckClick(ev) {
      var oEvent = ev || event;
      oEvent.cancelBubble = true;
      oEvent.stopPropagation();
    }
  }
};
</script>
<style scoped lang="less">
.branch-tree {
  height: 100%;
  overflow-y: auto;

  .button-group {
    text-align: center;
    .van-button {
      margin: 5px;
      .van-button__text {
        color: #fff;
      }
    }
  }

  .user-list-group {
    margin-top: 5px;
    .van-checkbox {
      margin: 4px 0;
      font-size: 14px;
      border-bottom: 1px solid #eeeeee;
      padding-left: 20px;
      height: 40px;
      .van-checkbox__icon {
        img {
          width: 20px;
        }
      }
    }
  }
}
</style>